<template>
  <!-- 用电占比 -->
  <div class="chart-box2">
    <div class="chart-title">用电占比</div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import { DataView } from "@antv/data-set";
import store from "../../../../store";

export default defineComponent({
  name: "ElRate",
  components: {},
  setup() {
    const state = reactive({
      chartId: "elRateChart",
      chart: null,
      data: [],
    });

    const initChart = () => {
      const data = state.data;

      // 通过 DataSet 计算百分比
      const dv = new DataView();
      dv.source(data).transform({
        type: "percent",
        field: "value",
        dimension: "type",
        as: "percent",
      });

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [0, 20],
      });

      state.chart.data(dv.rows);

      state.chart.scale({
        percent: {
          formatter: (val) => {
            val = (val * 100).toFixed(2) + "%";
            return val;
          },
        },
      });
      state.chart.coordinate("theta", {
        radius: 0.5,
      });
      state.chart.tooltip({
        showTitle: false,
        showMarkers: false,
      });
      state.chart.legend(false);
      state.chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("type")
        .label("type", {
          offset: -10,
        })
        .tooltip("type*percent", (item, percent) => {
          percent = (percent * 100).toFixed(2) + "%";
          return {
            name: item,
            value: percent,
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff",
        });

      const outterView = state.chart.createView();
      const dv1 = new DataView();
      dv1.source(data).transform({
        type: "percent",
        field: "value",
        dimension: "name",
        as: "percent",
      });

      outterView.data(dv1.rows);
      outterView.scale({
        percent: {
          formatter: (val) => {
            val = (val * 100).toFixed(2) + "%";
            return val;
          },
        },
      });
      outterView.coordinate("theta", {
        innerRadius: 0.5 / 0.75,
        radius: 0.75,
      });
      outterView
        .interval()
        .adjust("stack")
        .position("percent")
        .color("name", [
          "#BAE7FF",
          "#7FC9FE",
          "#71E3E3",
          "#ABF5F5",
          "#8EE0A1",
          "#BAF5C4",
        ])
        .label("name", (percent) => {
          return {
            content: (data) => {
              return `${data.name}：${data.value}`;
            },
            style: {
              fill: common.theme.lightWhite,
              fontSize: 14,
            },
          };
        })
        .tooltip("name*percent", (item, percent) => {
          percent = (percent * 100).toFixed(2) + "%";
          return {
            name: item,
            value: percent,
          };
        })
        .style({
          lineWidth: 1,
          stroke: common.theme.lightWhite,
        });

      state.chart.render();
    };

    watch(
      () => store.getters.centerControl.Energy_elRatio,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Energy_elRatio } = store.getters.centerControl;
      if (Energy_elRatio) {
        state.data = Energy_elRatio.list;

        if (state.chart) {
          state.chart.changeData(toRaw(state.data));
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
